import type { QueryClient } from '@tanstack/react-query'
import { createRootRouteWithContext, Link, Outlet } from '@tanstack/react-router'
import { Toaster } from "@/components/ui/sonner"
// import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'

interface MyROuterContext {
    queryClient: QueryClient
}

export const Route = createRootRouteWithContext<MyROuterContext>()({
    component: () => (
        <>
            <div className="mx-auto max-w-[550px] p-2 flex gap-5 mb-5">
                <Link to="/" className="[&.active]:font-bold">
                    Home
                </Link>{' '}
                <Link to="/expenses" className="[&.active]:font-bold">
                    Expenses
                </Link>
                <Link to="/create-expense" className="[&.active]:font-bold">
                    Create
                </Link>
                <Link to="/profile" className="[&.active]:font-bold">
                    Profile
                </Link>
            </div>
            <div className="mx-auto max-w-[550px] p-2">
                <Outlet />
            </div>
            <Toaster />
            {/* <TanStackRouterDevtools /> */}
        </>
    ),
})  